<template>
	<jk-view>
		<jk-operation-card class="margin-bottom-10 margin-top-10 width-100-percent fixed-operation-bar">
			<div class="flex-between-center">
				<div class="flex-start-center">
					<span class="el-icon-star-off item-gap"></span>
					<span>{{ ruleForm.code || '系统自动生成' }}</span>
					<el-tag v-show="ruleForm.id" size="mini" type="info" class="margin-left-10">
						<jk-state-bar :state="ruleForm.auditState" :state-list="reportStateList"></jk-state-bar>
					</el-tag>
				</div>
				<div class="flex-start-center">
					<el-button type="info" plain icon="el-icon-back" size="small" @click="onJumpList">返回列表</el-button>
					<div v-if="ruleForm.id && ruleForm.auditState === 1"><el-button :disabled="ruleForm.auditState !== 1" type="warning" icon="el-icon-circle-close" size="small" :loading="unReleaseBtnLoading" class="margin-left-4" @click="onUnReleaseBtn">撤销审核</el-button></div>
					<div v-if="ruleForm.id && pageType === 'edit'" class="margin-left-4 item-gap"><el-button :disabled="ruleForm.auditState !== 0" type="success" icon="el-icon-s-check" size="small" :loading="releaseBtnLoading" @click="onConfirmBtn('release')">保存并审核</el-button></div>
					<jk-button v-if="pageType !== 'detail'" :disabled="!!ruleForm.auditState" class="margin-left-4 item-gap" icon="el-icon-finished" :loading="saveBtnLoading" type="primary" @click="onConfirmBtn('save')">保存</jk-button>
				</div>
			</div>
		</jk-operation-card>
		<jk-card v-loading="showLoading">
			<el-form ref="ruleForm" :model="ruleForm" :rules="rules" :hide-required-asterisk="pageType === 'detail'" label-width="130px" :show-message="false">
				<div ref="box3">
					<div class="margin-bottom-4 flex-between-center">
						<div>
							<el-tag type="primary" effect="plain">
								<span class="el-icon-tickets item-gap"></span>
								<span>基本信息</span>
							</el-tag>
						</div>
						<!--<el-popover trigger="click" title="版本明细" width="600">
							<el-row v-if="historyData.length" :gutter="4" class="margin-bottom-4">
								<el-col :span="12">
									<el-button size="mini" class="width-100-percent margin-bottom-4">
										<div class="flex-between-center width-100-percent">
											<div class="width-100-percent flex-start-center">
												<span>创建：</span>
												<span style="font-weight: 700;">{{ historyData[0].creatorName }}</span>
											</div>
											<span class="width-100-percent flex-end-center">{{ historyData[0].createTime }}</span>
										</div>
									</el-button>
								</el-col>
								<el-col :span="12">
									<el-button size="mini" class="width-100-percent margin-bottom-4">
										<div class="flex-between-center width-100-percent">
											<div class="width-100-percent flex-start-center">
												<span>最近：</span>
												<span style="font-weight: 700;">{{ historyData[historyData.length - 1].updaterName }}</span>
											</div>
											<span class="width-100-percent flex-end-center">{{ historyData[historyData.length - 1].updateTime }}</span>
										</div>
									</el-button>
								</el-col>
							</el-row>
							<jk-table :data="historyData" size="mini" :height="200">
								<vxe-column width="80" field="version" title="版本号">
									<template slot-scope="scope">{{ scope.row.version }}.0</template>
								</vxe-column>
								<vxe-column :min-width="120" field="updaterName" title="修改人"></vxe-column>
								<vxe-column :min-width="160" field="updateTime" title="修改时间"></vxe-column>
								<vxe-column width="180" align="center" field="version" title="操作">
									<template slot-scope="scope">
										<div class="flex-center">
											<div style="cursor: pointer;color: #2d8cf0;margin-right: 10px;" @click="onSeeHistory(scope.row)">查看</div>
											<div style="cursor: pointer;color: #2d8cf0;" @click="onUseHistory(scope.row)">使用此版本</div>
										</div>
									</template>
								</vxe-column>
							</jk-table>
							<el-button v-show="ruleForm.id" slot="reference" size="mini">
								<span>当前版本：{{ ruleForm.version || 0 }}.0，版本记录：</span>
								<span style="font-weight: 700; font-size: 13px;">{{ ruleForm.historyCount || 0 }}</span>
								<span> 个</span>
							</el-button>
						</el-popover>-->
					</div>
					<jk-card ref="box1">
						<el-row class="flex-start-center-wrap">
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="区域" prop="workshopId">
									<span v-if="pageType === 'detail' || dataId" class="read-only-2">{{ ruleForm.workshopName }}</span>
									<el-select v-else v-model="ruleForm.workshopId" :disabled="!!ruleForm.id" placeholder="所属区域" class="width-100-percent" @change="onWorkshopChange">
										<el-option
											v-for="item in workshopList"
											:key="item.id"
											:label="item.name"
											:value="item.id"
										></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="工序" prop="processId">
									<span v-if="pageType === 'detail' || dataId" class="read-only-2">{{ ruleForm.processName }}</span>
									<jk-select v-else v-model="ruleForm.processId" :option-list="processList" :clearable="false" class="width-100-percent" size="medium" @change="onProcessChange"></jk-select>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="报工日期" prop="belongDate">
									<span v-if="pageType === 'detail' || dataId" class="read-only-2">{{ ruleForm.belongDate }}</span>
									<el-date-picker
										v-else
										v-model="ruleForm.belongDate"
										:disabled="!!ruleForm.id"
										type="date"
										style="width: 100%;"
										placeholder="报工日期"
										value-format="yyyy-MM-dd"
										@change="onDateChange"
									></el-date-picker>
								</el-form-item>
							</el-col>
							<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="报工班次" prop="scheduleShiftId">
									<span v-if="pageType === 'detail' || dataId" class="read-only-2">{{ ruleForm.shiftName }}</span>
									<el-select v-else v-model="ruleForm.scheduleShiftId" :disabled="!!ruleForm.id" clearable placeholder="报工班次" class="width-100-percent" @change="onScheduleShiftChange">
										<el-option
											v-for="item in scheduleShiftList"
											:key="item.id"
											:label="`${item.shiftName} (${item.beginTime} ~ ${item.endTime})`"
											:value="item.id"
										></el-option>
									</el-select>
								</el-form-item>
							</el-col>
							<!--<el-col :xl="6" :lg="8" :md="12" :sm="12" :xs="24">
								<el-form-item class="margin-bottom-10" label="报工类型">
									<span class="read-only-2">{{ !ruleForm.generateType ? '自动' : '手动' }}</span>
								</el-form-item>
							</el-col>-->
							<el-col :span="24">
								<el-form-item class="margin-bottom-0" label="备注">
									<span v-if="pageType === 'detail'" class="read-only-2">{{ ruleForm.remark }}</span>
									<el-input v-else v-model="ruleForm.remark" type="textarea" :rows="1"></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</jk-card>
				</div>
				<div>
					<el-tag type="primary" effect="plain" class="margin-bottom-4 margin-top-10">
						<span class="el-icon-reading item-gap"></span>
						<span>品种统计</span>
					</el-tag>
					<jk-table
						ref="jkTable"
						border
						:data="productList"
						:loading="tableLoading"
						:show-footer="true"
						:span-method="mergeColMethod"
						:footer-method="footerMethod"
					>
						<vxe-column title="品种" align="left" field="productName" :width="210"></vxe-column>
						<vxe-column title="批号" align="left" field="batchCode" :width="160"></vxe-column>
						<!--<vxe-column title="当班产量表量" align="right" field="differenceValue" :width="110"></vxe-column>-->
						<vxe-column title="当班产量(kg)" align="right" field="shiftQty" :width="110"></vxe-column>
					</jk-table>

				</div>
				<div class="flex-between-center margin-bottom-4 margin-top-10">
					<div>
						<!--<el-button v-if="pageType !== 'detail'" :disabled="!ruleForm.belongDate || !ruleForm.workshopId || !ruleForm.scheduleShiftId || !ruleForm.processId" :loading="tableLoading" type="primary" size="mini" icon="el-icon-refresh" @click="getOpenMachineListRequest">更新数据</el-button>-->
						<el-tag type="primary" effect="plain">
							<span class="el-icon-box item-gap"></span>
							<span>机台明细</span>
						</el-tag>
					</div>
					<div class="flex-end-center">
						<div><el-button type="warning" class="item-gap" size="mini" :loading="exportLoading" @click="onReportBtn">导出</el-button></div>
						<div class="item-gap">
							<el-button size="mini">
								<span>机台数：</span>
								<span style="font-weight: 700; font-size: 13px;">{{ ruleForm.prdReportMachineList ? ruleForm.prdReportMachineList.length : 0 }}</span>
								<span> 台</span>
							</el-button>
						</div>
						<!--<el-button size="mini" class="item-gap">
							<span>当班总能耗：</span>
							<span style="font-weight: 700; font-size: 13px;">{{ ruleForm.shiftElectricEnergy || 0 }}</span>
						</el-button>-->
						<div class="item-gap">
							<el-button size="mini">
								<span>当班总产量(M)：</span>
								<span style="font-weight: 700; font-size: 13px;">{{ ruleForm.shiftOutput || 0 }}</span>
							</el-button>
						</div>
						<div>
							<el-button size="mini">
								<span>当班总产量(kg)：</span>
								<span style="font-weight: 700; font-size: 13px;">{{ ruleForm.shiftQty || 0 }}</span>
							</el-button>
						</div>
						<!--<el-button v-show="['CS', 'XS'].includes(ruleForm.processCode)" size="mini">
							<span>当班称重总产量(kg)：</span>
							<span style="font-weight: 700; font-size: 13px;">{{ ruleForm.shiftWeightQty || 0 }}</span>
						</el-button>-->
					</div>
				</div>
				<jk-table
					ref="jkTable"
					border
					:data="ruleForm.prdReportMachineList"
					:loading="tableLoading"
					:show-footer="true"
					:span-method="mergeColMethod"
					:footer-method="footerMethod"
					:height="660"
				>
					<vxe-column title="机台" align="left" fixed="left" field="machineName" :width="90"></vxe-column>
					<vxe-column title="品种" align="left" field="productName" :min-width="180"></vxe-column>
					<vxe-column title="批号" align="left" field="batchCode" :min-width="130"></vxe-column>
					<!--<vxe-column title="运转效率%" align="right" field="efficiencyPercent" :width="90"></vxe-column>-->
					<!--<vxe-column title="机台锭数" align="right" field="spinCount" :width="90"></vxe-column>-->
					<vxe-column title="开台锭数" align="right" field="openSpinCount" :width="80">
						<template slot-scope="scope">
							<span v-if="pageType === 'detail'">{{ scope.row.openSpinCount }}</span>
							<jk-number-input v-else v-model="scope.row.openSpinCount" size="mini" @change="onOpenSpinCount($event, scope)"></jk-number-input>
						</template>
					</vxe-column>
					<!--<vxe-column title="开始能耗表数" align="right" field="startElectricEnergy" :min-width="140">
						<template slot-scope="scope">
							<span v-if="pageType === 'detail'">{{ scope.row.startElectricEnergy }}</span>
							<jk-number-input v-else v-model="scope.row.startElectricEnergy" size="mini" @change="onStartElectricEnergy($event, scope)"></jk-number-input>
						</template>
					</vxe-column>
					<vxe-column title="结束能耗表数" align="right" field="endElectricEnergy" :min-width="140">
						<template slot-scope="scope">
							<span v-if="pageType === 'detail'">{{ scope.row.endElectricEnergy }}</span>
							<jk-number-input v-else v-model="scope.row.endElectricEnergy" size="mini" @change="onEndElectricEnergy($event, scope)"></jk-number-input>
						</template>
					</vxe-column>
					<vxe-column title="当班能耗表数" align="right" field="shiftElectricEnergy" :width="100">
						&lt;!&ndash;<template slot-scope="scope">
							<span v-if="pageType === 'detail'">{{ scope.row.shiftElectricEnergy }}</span>
							<jk-number-input v-else v-model="scope.row.shiftElectricEnergy" size="mini"></jk-number-input>
						</template>&ndash;&gt;
					</vxe-column>-->
					<vxe-column title="开始产量表数" align="right" field="startOutput" :min-width="120">
						<template slot-scope="scope">
							<span v-if="pageType === 'detail'">{{ scope.row.startOutput }}</span>
							<jk-number-input v-else v-model="scope.row.startOutput" size="mini" @change="onStartOutput($event, scope)"></jk-number-input>
						</template>
					</vxe-column>
					<vxe-column title="结束产量表数" align="right" field="endOutput" :min-width="120">
						<template slot-scope="scope">
							<span v-if="pageType === 'detail'">{{ scope.row.endOutput }}</span>
							<jk-number-input v-else v-model="scope.row.endOutput" size="mini" @change="onEndOutput($event, scope)"></jk-number-input>
						</template>
					</vxe-column>
					<!--<vxe-column title="满锭产量(M)" align="right" field="fullOutput" :width="100"></vxe-column>
					<vxe-column title="满锭产量(kg)" align="right" field="fullQty" :width="100"></vxe-column>
					<vxe-column title="系数" align="right" field="outputRatio" :width="80">
						<template slot-scope="scope">
							<span v-if="pageType === 'detail'">{{ scope.row.outputRatio }}</span>
							<jk-number-input v-else v-model="scope.row.outputRatio" size="mini" @change="onOutputRatio($event, scope)"></jk-number-input>
						</template>
					</vxe-column>
					<vxe-column title="基数(每米公斤数)" align="right" field="meters" :width="120"></vxe-column>
					<vxe-column title="定量(g/m)" align="left" field="meters" :width="140">
						<template slot-scope="scope">
							<span>{{ scope.row.gramWeight || '0' }}g</span>
							<span>/</span>
							<span>{{ scope.row.meters || '0' }}m</span>
						</template>
					</vxe-column>-->
					<vxe-column title="采集表量" fixed="right" align="right" field="rawOutput" :width="100">
						<template slot-scope="scope">
							<span v-if="pageType === 'detail'">{{ scope.row.rawOutput }}</span>
							<jk-number-input v-else v-model="scope.row.rawOutput" size="mini" @change="onRawOutput($event, scope)"></jk-number-input>
						</template>
					</vxe-column>
					<vxe-column title="当班产量表量" fixed="right" align="right" field="differenceValue" :width="100"></vxe-column>
					<!--<vxe-column title="当班产量(M)" fixed="right" align="right" field="shiftOutput" :width="100"></vxe-column>-->
					<vxe-column title="当班产量(kg)" fixed="right" align="right" field="shiftQty" :width="100">
						<template slot-scope="scope">
							<span v-if="pageType === 'detail'">{{ scope.row.shiftQty }}</span>
							<jk-number-input v-else v-model="scope.row.shiftQty" size="mini"></jk-number-input>
						</template>
					</vxe-column>
					<!--<vxe-column :visible="['CS', 'XS'].includes(ruleForm.processCode)" title="当班称重产量(kg)" fixed="right" align="right" field="weighingShiftQty" :width="120"></vxe-column>-->
					<vxe-column :visible="pageType !== 'detail'" title="操作" align="center" fixed="right" field="operation" :width="100">
						<template slot-scope="scope">
							<el-popconfirm
								:title="`确定更新'${scope.row.machineCode}上'${scope.row.productName}'的产量吗？`"
								@confirm="onRefreshMachineItemBtn(scope)"
							>
								<el-button slot="reference" class="width-100-percent flex-start-center" :loading="scope.row.loading" type="primary" icon="el-icon-refresh" size="mini">更新</el-button>
							</el-popconfirm>
						</template>
					</vxe-column>
				</jk-table>
			</el-form>
		</jk-card>
	</jk-view>
</template>

<script>
    import formMixin from './form-mixin';
    import { productionPrdReportGet } from '@/api/production/xsReport';
    export default {
        mixins: [formMixin],
        data() {
            return {
                exportLoading: false
            };
        },
        methods: {
            /** 导出按钮操作 */
            onReportBtn() {
                this.$modal.confirm('是否确认导出所有数据数据项?').then(() => {
                    this.exportLoading = true;
                }).then(() => {
                    this.exportLoading = false;
                    return productionPrdReportGet({ id: this.$route.query.id }).then(res => {
                        if (res.data.status === 200) {
                  import('@/vendor/Export2Excel').then(excel => {
                    // const tHeader = this.tableColumnList.map(x => x.title);
                    // const filterVal = this.ruleForm.prdReportMachineList.map(x => x.keyName);
                    const tHeader = ['机台', '品种', '批号', '开台锭数', '开始产量表数',
                      '结束产量表数', '采集表量', '当班产量表量', '当班产量(kg)'];
                    const filterVal = ['machineName', 'productName', 'batchCode', 'openSpinCount', 'startOutput',
                      'endOutput', 'rawOutput', 'differenceValue', 'shiftQty'];
                    const list = JSON.parse(JSON.stringify(res.data.res.prdReportMachineList));
                    // 合计项
                    const totalItem = {};
                    filterVal.forEach((x, idx) => {
                      totalItem[x] = this.$refs.jkTable.$refs.xTable.getTableData().footerData[0][idx];
                    });
                    list.push(totalItem);
                    const data = list.map(v => filterVal.map(j => {
                      return v[j];
                    }));
                    excel.export_json_to_excel({
                      header: tHeader,
                      data,
                      // filename: `${this.$route.meta.title}`,
                      filename: `${this.ruleForm.processName + '报工' + '-' + this.ruleForm.belongDate + '-' + this.ruleForm.shiftName}`,
                      autoWidth: true,
                      bookType: 'xlsx'
                    });
                  });
                        }
                    });
                }).catch(() => {});
            },
            getOneFloat(num) {
                const numMain = Number(num);
                return parseFloat(numMain.toFixed(1));
            }
        },
        mounted() {
            this.getDependentData();
        }
    };
</script>

